import { Card, Tabs } from 'antd';
import { useState } from 'react';
import useRoute from '@/hooks/useRoute';
import CurrentEntrust from './CurrentEntrust';
import HistoryEntrust from './HistoryEntrust';
import Position from './Position';
import HistoryPosition from './HistoryPosition';
import TradeList from './TradeList';
import FundFlow from './FundFlow';
import HistoryPositionMy from './HistoryPositionMy';
import { isLocal } from '@/utils';
import HistoryEntrustNew from './HistoryEntrustNew';
import TradeListNew from './TradeListNew';

export default function Home() {
  const pageUrl = '/home'; // 当前页面url
  const { getPageParams, goto } = useRoute();
  const [currentPage, setCurrentPage] = useState(getPageParams('tab') || 'position');

  // tab菜单
  const tabList: any = [
    {
      label: '当前仓位',
      key: 'position',
      page: <Position />,
    },
    {
      label: '历史仓位',
      key: 'historyPosition',
      page: <HistoryPosition />,
    },
    {
      label: '历史仓位(新)',
      key: 'historyPositionMy',
      page: <HistoryPositionMy />,
    },
    {
      label: '当前委托',
      key: 'currentEntrust',
      page: <CurrentEntrust />,
    },
    {
      label: '历史委托',
      key: 'historyEntrust',
      page: <HistoryEntrust />,
    },
    {
      label: '历史委托(新)',
      key: 'historyEntrustNew',
      page: <HistoryEntrustNew />,
    },
    {
      label: '成交记录',
      key: 'tradeList',
      page: <TradeList />,
    },
    {
      label: '成交记录(新)',
      key: 'tradeListNew',
      page: <TradeListNew />,
    },
    {
      label: '资金流水',
      key: 'fundFlow',
      page: <FundFlow />,
    },
  ];

  // 处理页面
  function getPagesByTabs(tabList: any[]) {
    let obj: any = {};
    tabList.forEach((item: any) => {
      obj[item.key] = item.page;
    });
    return obj;
  }

  return (
    <div>
      <Card>
        <Tabs
          defaultActiveKey={currentPage}
          items={tabList}
          onChange={(key) => {
            setCurrentPage(key);
            goto(`${pageUrl}?tab=${key}`);
          }}
        />
        {/* 挂载tab对应页面 */}
        {getPagesByTabs(tabList)[currentPage]}
      </Card>
    </div>
  );
}
